<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="styles/icon/iconfont.css"/>
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>
<div id="app">

    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['1']">
                <el-submenu index="1">
                    <template slot="title"><i class="el-icon-menu"></i>博客管理</template>
                    <el-menu-item-group title="博客分类管理">
<!--                        <template slot="title">博客分类管理</template>-->
                        <el-menu-item index="1-1">分类列表</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="博客管理">
                        <el-menu-item index="1-2">博客列表</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown>
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>新增</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>

            <el-main>

                <el-row>
                    <el-button type="success" @click="dialogVisible1 = true">新增</el-button>
                </el-row>

                <el-table
                        :data="tableData"
                        style="width: 100%">
                    <el-table-column
                            prop="categoryId"
                            label="id"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="categoryName"
                            label="分类名"
                            width="180">
                    </el-table-column>

                    <el-table-column
                            label="操作">
                        <el-row slot-scope="scope">
                                <el-button type="primary" icon="el-icon-edit" circle @click="edit(scope.row)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle @click="deleteVisible = true, deleteId = scope.row.categoryId"></el-button>
                        </el-row>
                    </el-table-column>

                </el-table>

                <el-dialog
                        title="新增分类"
                        :visible.sync="dialogVisible1"
                        width="30%"
                >
                    <el-form>
                        <el-form-item label="分类名称">
                            <el-input v-model="name" placeholder="分类名称不能超过20个字"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="add">确 定</el-button>
                </span>
                </el-dialog>

                <el-dialog
                        title="修改分类"
                        :visible.sync="dialogVisible2"
                        width="30%"
                >
                    <el-form>
                        <el-form-item label="分类名称">
                            <el-input v-model="name2" placeholder="分类名称不能超过20个字"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取 消</el-button>
                    <el-button type="primary" @click="update">确 定</el-button>
                </span>
                </el-dialog>
                <el-dialog
                        width="30%"
                        title="删除"
                        :visible.sync="deleteVisible"
                        append-to-body>
                    <span>是否删除</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="deleteVisible = false">取 消</el-button>
                        <el-button type="primary" @click="del(deleteId)">确 定</el-button>
                    </span>
                </el-dialog>
            </el-main>


        </el-container>


    </el-container>
</div>

</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script src="js/request.js"></script>
<script src="api/category.js"></script>
<script>


    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                dialogVisible1: false,
                dialogVisible2: false,
                deleteVisible: false,
                name: '',
                name2:'',
                updateId:'',
                deleteId:'',
                mainVisible: false
            }
        },
        mounted(){
            this.findAll()
        },
        methods: {
            add(){
                this.dialogVisible1=false;
                addCategoryApi({"categoryName":this.name, "token":localStorage.getItem("token")}).then(res=>{
                    if(res.data.flag){
                        this.$message.success(res.data.message);
                        this.findAll();
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
            },
            edit(row){
                this.dialogVisible2 = true;
                this.name2 = row.categoryName;
                this.updateId = row.categoryId;
            },
            del(row){
                this.deleteVisible = false;
                deleteCategoryApi(row).then(res=>{
                    if(res.data.flag){
                        this.$message.success(res.data.message);
                        this.findAll()
                    }else{
                        this.$message.error(res.data.message);
                    }
                })
            },
            update(){
                updateCategoryApi({"categoryName":this.name2, "categoryId":this.updateId}).then(res=>{
                    if(res.data.flag){
                        this.dialogVisible2 = false;
                        this.findAll()
                    }
                })

            },
            findAll(){
                getAllCategoriesApi().then(res=>{
                    if(res.data.flag){
                        this.tableData = res.data.data;
                        this.name = '';
                    }
                })
            }
        }
    })
</script>

</html>